Introduction

Over a decade ago, I self-published The Nature of Code, an online resource and print book exploring the unpredictable evolutionary and emergent properties of nature in software via the creative coding framework Processing. It’s the understatement of the century to say that much has changed in the world of technology and creative media since then, and so here I am again, with a new and rebooted version of this book built around JavaScript and the p5.js library. The book has a few new coding tricks this time, but it’s the same old nature—birds still flap their wings, and apples still fall on our heads.

What Is This Book?

At ITP/IMA (Tisch School of the Arts, New York University), I’ve been teaching a course titled Introduction to Computational Media since 2004. The origins of this class date back to 1987 and the work of Mike Mills and John Henry Thompson (inventor of the Lingo programming language). In the course, students learn the basics of programming (variables, conditionals, loops, objects, arrays) as well as concepts related to making interactive media projects (pixels, data, sound, networking, 3D, and more). In 2008, I synthesized my materials for this class into an introductory book, Learning Processing, and in 2015, I created a series of video tutorials that follow the same trajectory in JavaScript with the p5.js library.

Once a student has learned the basics and seen an array of applications, their next step might be to delve deeply into a particular area. Maybe they want to focus on computer vision, data visualization, or generative poetry. My Nature of Code course (also taught at ITP/IMA since 2008) represents another possible next step. The course picks up exactly where my introductory material leaves off, demonstrating a world of programming techniques that focus on algorithms and simulation. The book you’re reading has evolved from that course.

My goal for this book is simple: I want to take a look at phenomena that naturally occur in the physical world and figure out how to write code to simulate them.

What, then, is this book exactly? Is it a science book? The answer is a resounding no. True, I might examine topics that come from physics or biology, but I won’t investigate these topics with a particularly high level of academic rigor. Instead, the book is “inspired by actual events.” I’m grabbing the parts from science and mathematics needed to build a software interpretation of nature, and veering off course or skipping details as I see fit.

Is this an art or design book? I would also say no. Regardless of how informal my approach might be, I’m still focusing on algorithms and their related programming techniques. Sure, the resulting demonstrations are visual (manifested as animated p5.js sketches), but they’re literal visualizations of the algorithms and programming techniques themselves, drawn only with basic shapes and grayscale color. It’s my hope, however, that you, dear reader, can use your creativity and visual ideas to make new, engaging work out of the examples. (I won’t complain if you turn every sketch into a rainbow.)

In the end, if this book is anything, it’s an old-fashioned programming textbook. While a scientific topic (Newtonian physics, cellular growth, evolution) may seed a chapter and the results might inspire artistic projects, the content itself will always boil down to the code implementation, with a particular focus on object-oriented programming.

A Word About p5.js

The p5.js library is a reimagining of the Processing creative coding environment for the modern web. I’m using it in this book for a number of reasons. For one, it’s an environment that I’m very familiar with. While the original Processing built on top of Java is my first love and still what I turn to when trying out a new idea, p5.js is what I now use for teaching many of my programming classes. It’s free, open source, and well suited to beginners, and because it’s JavaScript, everything runs right there in the web browser itself—no installation required.

For me, however, Processing and p5.js are first and foremost a community of people, not coding libraries or frameworks. Those people have generously dedicated countless hours to making and sharing the software. I’ve written this book for that community and for anyone and everyone who loves to explore their curiosity and play through code.

All that said, nothing ties this book’s content strictly to p5.js—or Processing, for that matter. This book could have been written with “vanilla” JavaScript or Java, or with any number of other open source creative coding environments like openFrameworks, Cinder, and so on. It’s my hope that after I’ve completed this book, I’ll be able to release versions of the examples that run in other environments. If anyone is interested in helping to port the examples, please feel free to contact me by email at daniel@natureofcode.com. Go on, you know you want to port The Nature of Code to PHP!

All the examples in this book have been tested with p5.js version 1.9.0, but for the most part they should also work with earlier versions. I’ll be keeping them up to date with the latest version. The most recent code can always be found on this book’s website and its associated GitHub repository.

What Do You Need to Know?

The prerequisites for understanding the material in this book could be stated as “one semester of programming instruction with p5.js, Processing, or any other creative coding environment.” That said, there’s no reason you couldn’t read this book having learned programming with a different language or development environment.

If you’ve never written any code before, while you could read the book for the concepts and inspiration, you’ll likely struggle with the code because I’m assuming knowledge of the fundamentals: variables, conditionals, loops, functions, objects, and arrays. If these concepts are new to you, my “Code! Programming with p5.js” and “Learning Processing” video courses provide the fundamentals of what you need to know.

If you’re an experienced programmer but haven’t worked with p5.js, you can probably pick it up by checking out the p5.js documentation, poking through the examples, and reading through the library’s “Get Started” page.

I should also point out that experience with object-oriented programming is fairly critical. I’ll review some of the basics in Chapter 0, but if classes and objects are unfamiliar to you, I suggest watching my p5.js and Processing object-oriented video tutorials, both also available at the Coding Train.

How Are You Reading This Book?

Are you reading this book on a Kindle? Printed paper? On your laptop in PDF form? On a tablet showing an animated HTML5 version? Are you strapped to a chair, absorbing the content directly into your brain via a series of electrodes, tubes, and cartridges?

My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (npm run build), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the Magic Book project, which is an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.

The reality of putting this book together isn’t quite so clean as that, and the story of how it happened is long. If you’re interested in learning more, make sure to read the book’s acknowledgments, and then go hire the people I’ve thanked to help you publish a book! I’ll also include more details in the associated GitHub repository.

The bottom line is that no matter what format you’re reading it in, the material is all the same. The only difference will be in how you experience the code examples—more on that in “How to Read the Code”.

The Coding Train Connection

Personally, I still love an assembled amalgamation of cellulose pulp, meticulously bound together with a resilient spine, upon which pigmented compounds have been artfully deployed to convey words and ideas. Yet, ever since 2012, when I impulsively recorded my very first video lesson about programming in my office at ITP, I’ve discovered the tremendous value and joy in conveying ideas and lessons through moving pictures.

All this is to say, I have a YouTube channel called the Coding Train. I mentioned it earlier when discussing options for learning the prerequisite material for this book, and if you continue reading, you’ll find I continue to reference related videos. I might allude to one I made about a related algorithm or alternative technique for a particular coding example, or suggest a series on a tangential concept that could provide additional context to a topic I’m exploring.

If video learning is your style, I’m also working on an accompanying set of video tutorials that follow the exact same material as this book. I made a whole bunch 10 years ago with Processing, and more recently I started publishing a series of updated ones with p5.js. At the time of this writing, I’m about halfway through Chapter 5.

Additional Resources

There’s also an abundance of exceptional educational material teaching simulation and generative algorithms that I did not write or record. I always recommend that you explore various perspectives and voices when attempting to learn something new. It’s possible that what I’ve written might not click with you, and even hearing me repeat the same information in video form, regardless of how much mugging I do for the camera, won’t help. Sometimes what’s best is someone else you can relate to writing or saying or demonstrating the same concepts in different words with a different style. To this end, I’m including an “Additional Resources” section on this book’s website. If you create your own materials or have any recommendations for inclusion, please get in touch!

Two quick recommendations I have right now are The Computational Beauty of Nature by Gary William Flake (MIT Press, 1998)—it’s where I originally learned a lot of the ideas for this book—and the superbly organized online resource That Creative Code Page by Taru Muhonen and Raphaël de Courville.

The “Story” of This Book

If you glance over the book’s table of contents, you’ll notice 12 chapters (0–11!), each one covering a different topic. And in one sense, this book is just that—a survey of a dozen concepts and associated code examples. Nevertheless, in putting together the material, I always imagined something of a linear narrative. Before you begin reading, I’d like to walk you through this story.

Part 1: Inanimate Objects

A soccer ball lies in the grass. A kick launches it into the air. Gravity pulls it back down. A heavy gust of wind keeps it afloat a moment longer until it falls and bounces off the head of a jumping player. The soccer ball isn’t alive; it makes no choices as to how it will move through the world. Rather, it’s an inanimate object waiting to be pushed and pulled by the forces of its environment.

How would you model a soccer ball moving in a digital canvas? If you’ve ever programmed a circle moving across a screen, you’ve probably written the following line of code:

x = x + 1;

You draw a shape at position x. With each frame of animation, you increment the value of x, redraw the shape, and voilà—the illusion of motion! Maybe you took it a step or two further and included a y position, as well as variables for speed along the x- and y-axes:

x = x + xspeed;

y = y + yspeed;

Part 1 of this story will take this idea even further. After exploring how to use different flavors of randomness to drive an object’s motion (Chapter 0), I’m going to take these xspeed and yspeed variables and demonstrate how together they form a vector (Chapter 1). You won’t get any new functionality out of this, but it will build a solid foundation for programming motion in the rest of the book.

Once you know a little something about vectors, you’re going to quickly realize that a force (Chapter 2) is a vector. Kick a soccer ball and you’re applying a force. What does a force cause an object to do? According to Sir Isaac Newton, force equals mass times acceleration, so that force causes an object to accelerate. Modeling forces will allow you to create systems with dynamic motion, in which objects move according to a variety of rules.

Now, that soccer ball to which you applied a force might have also been spinning. If an object moves according to its linear acceleration, it can spin according to its angular acceleration (Chapter 3). Understanding the basics of angles and trigonometry will allow you to model rotating objects as well as grasp the principles behind oscillating motion, like a pendulum swinging or a spring bouncing.

Once you’ve tackled the basics of motion and forces for an individual inanimate object, I’ll show you how to make thousands upon thousands of those objects and manage them as a single unit called a particle system (Chapter 4). Particle systems are also a good excuse to look at some additional features of object-oriented programming—namely, inheritance and polymorphism.

Part 2: It’s Alive!

What does it mean to model life? Not an easy question to answer, but I’ll begin by building objects that have an ability to perceive their environment. Let’s think about this for a moment. A block that falls off a table moves according to forces, as does a dolphin swimming through the water. But there’s a key difference: the block can’t decide to leap off the table, whereas the dolphin can decide to leap out of the water. The dolphin has dreams and desires. It feels hunger and fear, and those feelings inform its movements. By examining techniques behind modeling autonomous agents (Chapter 5), you’ll learn to breathe life into inanimate objects, allowing them to make decisions about their movements according to their understanding of their environment.

In Chapters 1 through 5, all the examples will be written “from scratch”—meaning the code for the algorithms driving the motion of the objects will be written directly in p5.js. I’m certainly not the first programmer ever to consider the idea of simulating physics and life in animation, however, so next I’ll examine how you can use physics libraries (Chapter 6) to model more sophisticated behaviors. I’ll look at the features of two libraries: Matter.js and Toxiclibs.js.

The end of Chapter 5 will explore group behaviors that exhibit the properties of complexity. A complex system is typically defined as a system that’s more than the sum of its parts. While the individual elements of the system may be incredibly simple and easily understood, the behavior of the system as a whole can be highly complex, intelligent, and difficult to predict. Chasing complexity will lead you away from thinking purely about modeling motion and into the realm of rule-based systems. What can you model with cellular automata (Chapter 7), systems of cells living on a grid? What types of patterns can you generate with fractals (Chapter 8), the geometry of nature?

Part 3: Intelligence

You made things move. Then you gave those things hopes and dreams and fears, along with rules to live by. The last step in this book will bring intelligent decision-making into your creations. Can you apply the biological process of evolution to computational systems (Chapter 9) in order to evolve the behavior of autonomous agents? Taking inspiration from the human brain, can you program an artificial neural network (Chapter 10)? How can agents make decisions, learn from their mistakes, and adapt to their environment (Chapter 11)?

Using This Book as a Syllabus

While the content in this book certainly makes for an intense and highly compressed semester, I’ve designed it to fit into a 14-week course. I find that some chapters work better expanded across multiple weeks, while others can be combined and explored together in a single week. Here’s one possible syllabus:

If you’re considering using this text for a course or workshop, please feel free to contact me. I hope to eventually finish the companion set of videos, as well as include helpful slides as supplementary educational materials. If you make your own, I’d love to hear about it!

How to Read the Code

Code is the main medium of this book, weaving throughout the narrative as it’s dissected and examined. Sometimes it appears as full, stand-alone examples, other times it drops in as a single line or two, and often it’s stretched over whole sections in many short snippets, with explanations nestled in between. Whatever form it takes, code will always appear in a monospaced font. Here’s a quick guide on how to navigate the types of code sprinkled throughout the book.

Full Examples

Each chapter includes fully functional code examples that are written with the p5.js library. Here’s what they look like:

function setup() {

  createCanvas(640, 240);

  background(255);

}

function draw() {

  fill(0, 25);

  stroke(0, 50);

  circle(random(width), random(height), 16);

}

The examples are numbered sequentially within each chapter to help you find the corresponding code online. In the printed version of the book, you’ll see a screenshot right below the example title. The online version has the running sketch embedded right there on the page. For animated examples (which are almost all of them), the screenshots will often show a “trail” of motion. This effect was achieved by adding transparency to the background(255, 10) function, though the accompanying code won’t include that enhancement.

Below the example, you’ll find the code, but it’s not always the complete code. Since many examples are quite long and span multiple files, I make my best effort to include a snippet that highlights the main aspects of the example or whatever new components are being introduced that weren’t already discussed earlier in the section.

You can find the full version of the code on the book’s website. There, you can interact with, modify, and experiment with the code in the p5.js Web Editor. Additionally, everything is included in the book’s GitHub repository. Here are links for all the materials:

• The book’s website includes the full text of the book, additional reading and references, and all code examples.
• The GitHub repositories contain the raw source code for the book’s website, the book’s build process, and all code examples.
• In addition to the website and GitHub repositories, you can also access the code by viewing the list of sketches in the p5.js web editor.

Notice that I’ve used comments in the example to address what’s happening in the code. These comments float next to the code (the appearance may vary depending on how you’re reading the book). The background shading groups the comments with their corresponding lines of code.

Complete Snippets

Though rare, “complete” sections of code are occasionally mixed in with the body text. Sometimes, as with the sample Example #.# in the previous section, I might actually list all the code associated with a complete p5.js sketch. In most cases, however, I’m considering a “complete” snippet to be the code for an entire function or a class—a fully finished block of code, complete with opening and closing curly brackets and everything in between. Something like this:

function draw() {
  background(255);
  for (let x = 0; x < width; x += spacing) {
    fill(255);
    circle(x, height / 2, spacing);
  }
}

This snippet shows the entire draw() function, but it still isn’t a complete sketch. It assumes the existence of a global variable called spacing, as well as a setup() function that calls createCanvas().

Context-Free Code

Occasionally, you’ll find lines of code hanging out on the page without a surrounding function or context. These snippets are there to illustrate a point, not necessarily to be run as is. They might represent a concept, a tiny piece of an algorithm, or a coding technique.

    fill(240, 99, 164);

Notice that this context-free snippet matches the indentation of fill(255) in the previous “complete” snippet. I’ll do this when the code has been established to be part of something demonstrated previously. Admittedly, this won’t always work out so cleanly or perfectly, but I’m doing my best!

Snipped Code

Be on the lookout for the scissors! This design element indicates that a code snippet is a continuation of a previous piece or will be continued after some explanatory text. Sometimes it’s not actually being continued but is just cut off because all the code isn’t relevant to the discussion at hand. The scissors are there to say, “Hey, there might be more to this code above or below, or at the very least, this is a part of something bigger!” Here’s how this might play out with some surrounding body text.

The first step to building a p5.js sketch is to create a canvas:

function setup() {

  createCanvas(640, 240);

Then it’s time to draw the background:

  background(255);

I also like to include a circle in the center of the canvas:

  circle(width / 2, height / 2, 200);

}

In draw(), I might want to start placing squares at random locations on top of the background and fixed circle. The rest of the code could be anything you want it to be!

function draw() {

  rectMode(CENTER);

  square(random(width), random(height), 20);

Notice that I’m keeping the indentation consistent to try to help establish the context, and again, I’m using the scissors icon to help indicate where code is continued or cut off.

A particular side effect of using snipped code is that you’ll often notice opening curly brackets in one snippet that don’t have a corresponding closing bracket until several snippets later (if at all). If you’re used to looking at JavaScript code, this may initially send you into a mild panic, but hopefully you’ll get used to it.

Exercises

Each chapter includes numbered exercises that serve as your playground to apply, experiment with, and go beyond the concepts and code provided within the chapters. Here’s what an exercise might look like:

function draw() {

  fill(0, 25);

  stroke(0, 50);

  circle(random(width), random(height), random(16, 64));

}

To keep you on your toes, the exercises come in a variety of formats. Some pose technical challenges, asking you to write a variation of a specific algorithm or solve a highly specific problem. Others are open-ended inquiries, prompting you to play and experiment, following your own ideas. Some include snippets of code with blank spots, inviting you to fill them in directly. Don’t hesitate to write, scribble, or doodle in this very book as you work through them!

Solutions

Solutions for the exercises are provided on the book’s website. Or I should say, I aspire to include solutions for all the exercises on the book’s website. As of this moment, just a handful are available, but hopefully by the time you’re reading this, there will be many more. If you’d like to contribute a solution to an exercise, I would love for you to do so via the book’s GitHub repository!

The Ecosystem Project

As much as I’d like to pretend you could learn everything by curling up in a comfy chair and reading some prose, to learn programming you’re really going to have to do some programming. The exercises scattered throughout each chapter are a start, but you might find it helpful to also keep in mind a more substantial project idea (or two) that you can develop as you go from chapter to chapter. In fact, when teaching my Nature of Code course at ITP, I’ve often found that students enjoy building a single project, step by step, week by week, over the course of the semester.

At the end of each chapter, you’ll find a series of prompts for one such project—exercises that build on each other, one topic at a time. This project is based on the following scenario. You’ve been asked by a science museum to develop the software for a new exhibit, the Digital Ecosystem, a world of animated, procedural creatures that live in a computer simulation for visitors to enjoy as they enter the museum. I don’t mean to suggest that this is a particularly innovative or creative concept. Rather, I’ll use this example Ecosystem Project idea as a literal representation of the content in the book, demonstrating how the elements can fit together in a single program. I encourage you to develop your own idea, one that’s perhaps more abstract and nontraditional.

Getting Help and Submitting Feedback

Coding can be tough and frustrating, and the ideas in this book aren’t always straightforward. You don’t have to go it alone. There’s probably someone else reading right now who would love to co-organize a study group or a book club where you can meet, chat, and share your struggles and successes. If you don’t find a local community for traveling this journey together, what about an online one? Two places I’d suggest are the official Processing forums and the Coding Train Discord server.

I consider the online version of this book a living document and welcome your feedback. For all things book related, please visit the Nature of Code website. The raw source text of the book and all the illustrations are on GitHub. Please leave feedback and submit corrections by using GitHub issues.

More important, I want to see what you make! You can share your ideas by submitting to the passenger showcase on the Coding Train website or in the channels on the aforementioned Discord. A hello in a YouTube comment is always welcome (although to be honest, it’s often best not to read the comments on YouTube), and feel free to tag me on whatever platform the future of social media has to offer—whichever one is the friendliest and least toxic! I want to enjoy all the bloops that swim in your ecosystem. Whether they leap triumphantly over a wave of creativity or make a tiny splash in a pond of learning, let’s bask in the ripples they send through the nature of coding!